<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '我的消息',
    navigationStyle: 'custom',
    backgroundColor: '#000',
  },
}
</route>

<template>
  <view class="game-hall">
    <view class="back-button" @click="handleBack">
      <wd-icon name="arrow-left" size="40rpx"></wd-icon>
      <text class="back-text">我的消息</text>
    </view>
    <view class="email-container">
      <!-- 消息统计和操作区 -->
      <view class="message-stats">
        <text class="message-count">
          消息总数
          <text class="total-count">{{ messages.length }}</text>
        </text>
        <text class="mark-read-btn" @click="markAllAsRead">标记全部已读</text>
      </view>

      <!-- 消息列表 -->
      <view class="message-list">
        <!-- 消息项 -->
        <view class="message-item" v-for="(message, index) in messages" :key="index">
          <!-- 普通状态 -->
          <view class="message-content">
            <view class="message-header">
              <view class="sender-info">
                <text class="unread-dot" v-if="!message.isRead"></text>
                <text class="message-sender">{{ message.sender }}</text>
              </view>
              <text class="message-time">{{ message.time }}</text>
            </view>
            <text class="message-text">{{ message.content }}</text>
            <view class="message-actions">
              <button
                v-if="!message.isRead && !message.hasGift"
                class="claim-btn"
                @click.stop="look(index)"
              >
                查看
              </button>
              <button
                v-else-if="!message.isRead && message.hasGift && !message.giftClaimed"
                class="claim-btn"
                @click.stop="claimGift(index)"
              >
                领取
              </button>
              <button v-else class="delete-btn" @click.stop="handleDelete(index)">删除</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useToast } from 'wot-design-uni'
const toast = useToast()

// 消息数据模型
interface Message {
  id: number
  sender: string
  content: string
  time: string
  hasGift: boolean
  giftClaimed: boolean
  isDeleting: boolean
  isRead: boolean
}

// 消息列表数据
const messages = ref<Message[]>([
  {
    id: 1,
    sender: '新人奖励',
    content: '亲爱的用户，感谢您的支持！恭喜您获得新人大礼包，内含精美礼品！',
    time: '2023-07-24 08:53:13',
    hasGift: true,
    giftClaimed: false,
    isDeleting: false,
    isRead: false,
  },
  {
    id: 2,
    sender: '新人奖励',
    content: '亲爱的用户，感谢您的支持！我们已向您的账户赠送了20能量棒，尽情使用吧！',
    time: '2023-07-24 08:53:13',
    hasGift: true,
    giftClaimed: true,
    isDeleting: false,
    isRead: true,
  },
  {
    id: 3,
    sender: '新人奖励',
    content: '亲爱的用户，感谢您的支持！',
    time: '2023-07-24 08:53:13',
    hasGift: false,
    giftClaimed: true,
    isDeleting: false,
    isRead: false,
  },
  {
    id: 4,
    sender: '新人奖励',
    content: '亲爱的用户，感谢您的支持！',
    time: '2023-07-24 08:53:13',
    hasGift: false,
    giftClaimed: true,
    isDeleting: false,
    isRead: false,
  },
  {
    id: 5,
    sender: '新人奖励',
    content: '亲爱的用户，感谢您的支持！',
    time: '2023-07-24 08:53:13',
    hasGift: false,
    giftClaimed: true,
    isDeleting: false,
    isRead: false,
  },
  {
    id: 6,
    sender: '新人奖励',
    content: '亲爱的用户，感谢您的支持！',
    time: '2023-07-24 08:53:13',
    hasGift: false,
    giftClaimed: true,
    isDeleting: false,
    isRead: false,
  },
])

// 标记全部已读
const markAllAsRead = () => {
  // 将messages数组里的每一项的isRead置为true
  messages.value.forEach((message) => {
    message.isRead = true
  })
  toast.success('已全部标记为已读！')
}

// 处理删除按钮点击
const handleDelete = (index: number) => {
  // 显示删除确认对话框
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条消息吗？',
    success: (res) => {
      if (res.confirm) {
        // 确认删除
        messages.value.splice(index, 1)
        toast.success('消息已删除')
      }
    },
  })
}

// 领取礼品
const claimGift = (index: number) => {
  // 实际项目中这里应该调用API领取礼品
  messages.value[index].giftClaimed = true
  messages.value[index].isRead = true
  toast.success('礼品领取成功！')
}

// 查看详情
const look = (index: number) => {
  // 实际项目中这里应该调用API查看详情
  messages.value[index].isRead = true
  toast.success('查看详情成功！')
}

// 处理返回
const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;

  /* 返回按钮 */
  .back-button {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    color: #ffffff;
    font-size: 32rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    .back-icon {
      margin-right: 8rpx;
      font-size: 28rpx;
    }
  }
  .email-container {
    background-image: url('/static/images/home/email/emailBg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #ffffff;
    padding: 20rpx;
    overflow: hidden;
    margin-top: 80rpx;
    height: calc(100vh - 180rpx);
  }
  // 消息统计和操作区
  .message-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 30rpx;

    .message-count {
      font-size: 28rpx;
      color: #ffffff;
      .total-count {
        font-size: 32rpx;
        color: #00ffff;
      }
    }

    .mark-read-btn {
      font-size: 28rpx;
    }
  }

  // 消息列表
  .message-list {
    max-height: calc(100vh - 320rpx);
    overflow-y: auto;
    padding: 0 40rpx;

    // 隐藏滚动条但保留滚动功能
    &::-webkit-scrollbar {
      display: none;
    }

    // 消息项
    .message-item {
      margin-bottom: 30rpx;
      padding: 10rpx 30rpx;
      background: rgba(30, 30, 40, 0.9);
      border-radius: 15rpx;
      transition: all 0.3s ease;
      position: relative;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
      border: 1px solid #00ffff;
    }

    // 消息内容
    .message-content {
      display: flex;
      flex-direction: column;
      width: 100%;

      .message-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10rpx;
        border-bottom: 1px solid #00ffff;

        .sender-info {
          display: flex;
          align-items: center;

          .unread-dot {
            display: inline-block;
            width: 16rpx;
            height: 16rpx;
            background-color: #00ffff;
            border-radius: 50%;
            margin-right: 10rpx;
          }

          .message-sender {
            font-size: 25rpx;
            color: #fff;
          }
        }

        .message-time {
          font-size: 24rpx;
          color: #fff;
        }
      }

      .message-text {
        font-size: 28rpx;
        color: #fff;
        line-height: 1.6;
        margin: 20rpx 0;
      }

      // 操作按钮区域
      .message-actions {
        // display: flex;
        // justify-content: flex-end;
        // width: 100%;
      }

      // 领取按钮
      .claim-btn {
        background: #ffffff;
        color: #666666;
        border: 1px solid #00ffff;
        border-radius: 10rpx;
        width: 120rpx;
        height: 60rpx;
        font-size: 26rpx;
        font-weight: 500;
        transition: all 0.3s ease;
        float: right;
        &:active {
          transform: scale(0.95);
        }
      }

      // 删除按钮
      .delete-btn {
        background: #ffffff;
        color: #666666;
        border: 1px solid #00ffff;
        border-radius: 10rpx;
        width: 120rpx;
        height: 60rpx;
        font-size: 26rpx;
        font-weight: 500;
        transition: all 0.3s ease;
        float: right;
        &:active {
          transform: scale(0.95);
        }
      }
    }
  }
}
</style>
